import React, { Component,Fragment } from 'react'
import Swiper from 'swiper'

class Banner extends Component{

  renderSwiperItem = () => {
    return this.props.banners && this.props.banners.map( item => {
      return (
        <div className="swiper-slide" key = { item.bannerId }
          style = {{
            width: '100%',
            height: this.props.height 
          }}
        >
          <img style = {{
            width: '100%',
            height: '100%'
          }} src = { item.imgUrl } />
        </div>
      )
    })
  }

  render() {
    // console.log( 'render')  两次   数据从无到有
    return (
       <Fragment>
         <div className="swiper-container" id = { this.props.id  }

         >
            <div className="swiper-wrapper">
                { this.renderSwiperItem() }
            </div>
            {/* <!-- 如果需要分页器 --> */}
            <div className="swiper-pagination"></div>
            
            {/* <!-- 如果需要导航按钮 --> */}
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
            
            {/* <!-- 如果需要滚动条 --> */}
            <div className="swiper-scrollbar"></div>
        </div>
       </Fragment>
    )
  }


  componentDidUpdate () {
    if( !this.swiper ) {
      this.swiper =  new Swiper (`#${ this.props.id }`, this.props.bannerOptions )   
    }
  }
}
export default Banner 